import React from 'react';
import { Carousel } from 'antd';
import Header from './../../components/officialHeader/header';
import Footer from './../../components/officialFooter/footer';
import Slider from './../../components/Slider/Slider';
import BannerBox from './components/bannerBox';


let Index = React.createClass({

  getInitialState() {

    return {
      isSelected: 'renter'
    }
  },

  handleChange(e) {
    this.setState({
      isSelected: e.target.id
    })
  },

  render(){
    const IMAGE_DATA = [
      {
        src: require('./../../assets/img/official/indexBanner01.jpg'),
        alt: 'images-1',
      },
      {
        src: require('./../../assets/img/official/indexBanner02.jpg'),
        alt: 'images-2',
      },
      {
        src: require('./../../assets/img/official/indexBanner03.jpg'),
        alt: 'images-3',
      },
    ];
    let imgArry = [];
    let key = 0;
    IMAGE_DATA.forEach((item) => {

      let content = (
        <div key={key++}>
          <img src={item.src}/>
        </div>
      )
      imgArry.push(content);
    })

    const ImageData = [
      {
        src: require('./../../assets/img/official/Ezgy.jpg'),
        alt: 'images-01',
      },
      {
        src: require('./../../assets/img/official/dgtz.jpg'),
        alt: 'images-02',
      },
      {
        src: require('./../../assets/img/official/jc.jpg'),
        alt: 'images-03',
      },
      {
        src: require('./../../assets/img/official/njyh.jpg'),
        alt: 'images-04',
      },
      {
        src: require('./../../assets/img/official/phjf.jpg'),
        alt: 'images-05',
      },
      {
        src: require('./../../assets/img/official/rdkj.jpg'),
        alt: 'images-06',
      },
      {
        src: require('./../../assets/img/official/rg.jpg'),
        alt: 'images-07',
      },
      {
        src: require('./../../assets/img/official/rtw.jpg'),
        alt: 'images-08',
      },
      {
        src: require('./../../assets/img/official/sfq.jpg'),
        alt: 'images-09',
      },
      {
        src: require('./../../assets/img/official/tzg.jpg'),
        alt: 'images-010',
      }
      , {
        src: require('./../../assets/img/official/wjs.jpg'),
        alt: 'images-011',
      },
      {
        src: require('./../../assets/img/official/zjnx.jpg'),
        alt: 'images-012',
      },
      {
        src: require('./../../assets/img/official/ZJ.jpg'),
        alt: 'images-013',
      },
      {
        src: require('./../../assets/img/official/hsdjt.jpg'),
        alt: 'images-014',
      },
        {
        src: require('./../../assets/img/official/pufa.jpg'),
        alt: 'images-015',
      }
    ];

    let ImgArray = [];
    ImageData.forEach((item) => {

      let content = (
        <li key={key++}>
          <img src={item.src} width="178" height="60"/>
        </li>
      )
      ImgArray.push(content);
    })

    let isSelected = this.state.isSelected;
    return (
      <div>
        <Header/>
        <div className="indexBanner">
          <div className="wp-banner">
          {
            <Slider items={IMAGE_DATA}
                    speed={1.5}
                    delay={7.0}
                    pause={true}
                    autoplay={true}
                    dots={true}
                    arrows={true}/>
          }
            
                    {
                      // <Carousel  autoplay dots>
                      //   {
                      //     imgArry
                      //   }

                      // </Carousel>
                    }
            
          </div>
          <BannerBox/>

        </div>

        <div className="indexFeatureBg">
          <div className="indexFeature wrap1180">
            <ul>
              <li className="li1">
                <p className="pic"></p>
                <p className="ti">高效发布房源</p>
                <p className="intro">提供标准化、极致细致的房源发布功能，通过微信、QQ、微博等瞬时实现分享，让您手中的房源传递至千里之外。</p>
              </li>
              <li className="li2">
                <p className="pic"></p>
                <p className="ti">快速搜索房源</p>
                <p className="intro">提供多维度、多指标房源检索功能，让租客在最短的时间内找到钟意的房源，并可对多个房源进行收藏对比。</p>
              </li>
              <li className="li3">
                <p className="pic"></p>
                <p className="ti">手机签约交租</p>
                <p className="intro">让房东和租客从A4纸张的打印合同和银行转账交房租中彻底解脱，轻松一点完成签约，房租平台定期代扣。</p>
              </li>
              <li className="li4">
                <p className="pic"></p>
                <p className="ti">金融信贷支持</p>
                <p className="intro">房东需要拓展新房源，装修更好的房子，资金不够，可以向平台融资；租客房租可以再分期，如果哪个月手头紧还可以向平台申请替你付。</p>
              </li>
            </ul>
          </div>
        </div>

        {
          <div className="rentOrLandlordBg">
            <div className="rentOrLandlord wrap1180">
              <div className="TabNav">
                <ul className="clearfix" onClick={this.handleChange}>
                  <li id="renter" className={isSelected === 'renter' ? 'hover' : ''}><i></i>租客</li>
                  <li id="landlord" className={isSelected !== 'renter' ? 'hover' : ''}><i></i>房东</li>
                </ul>
              </div>
              <div className="TabCon" style={{display: isSelected === 'renter' ? 'block' : 'none'}}>
                <dl className="isRent">
                  <dt>如果你要租房</dt>
                  <dd>在爱租派，假房源、假交易、克扣押金、高额的退租费用将不复存在，您将用最短的时间、最少的支出享受我们的服务，在这里您得到的将不仅仅是一个居所，而是一群伙伴。</dd>
                </dl>
                <dl className="process">
                  <dt>租房流程</dt>
                  <dd className="one clearfix">
                    <p className="pic"></p>
                    <div className="bd">
                      <p className="ti">01 手机找房</p>
                      <p className="intro">爱租派只提供经过认证的真实房源，通过爱租派移动端即可找到适合你的房源！</p>
                    </div>
                  </dd>
                  <dd className="two clearfix">
                    <p className="pic"></p>
                    <div className="bd">
                      <p className="ti">02 线下看房</p>
                      <p className="intro">找到合适房源，打个电话预约下，顾问全程陪同你完成看房，选择最适合您的房子</p>
                    </div>
                  </dd>
                  <dd className="three clearfix">
                    <p className="pic"></p>
                    <div className="bd">
                      <p className="ti">03 在线签约入住</p>
                      <p className="intro">通过爱派租移动端，能快速搞定租房合同，签约、支付一气呵成！</p>
                    </div>
                  </dd>
                  <dd className="four clearfix">
                    <p className="pic"></p>
                    <div className="bd">
                      <p className="ti">04 在线缴纳租金</p>
                      <p className="intro">通过绑定您的银行卡，每月可以及时自动缴纳房租，还可支持支付宝、微信主动付款。更有报修、建议、开锁等日常服务通过爱租派手机端一键传达</p>
                    </div>
                  </dd>
                </dl>
              </div>
              <div className="TabCon landlordCon" style={{display: isSelected !== 'renter' ? 'block' : 'none'}}>
                <dl className="isRent">
                  <dt>如果你有房出租</dt>
                  <dd>在爱租派，您将不再为带看、打理、收款、找到最合适的房客而苦恼，爱租派将用最短的时间为您找到房客，让您从这些琐碎的事情中脱离出来。</dd>
                </dl>
                <dl className="process">
                  <dt>出租流程</dt>
                  <dd className="one clearfix">
                    <p className="pic"></p>
                    <div className="bd">
                      <p className="ti">01 在线发房</p>
                      <p className="intro">如果您有房子出租，快通过爱租派移动端告诉我们，顾问会在第一时间和您联系！</p>
                    </div>
                  </dd>
                  <dd className="two clearfix">
                    <p className="pic"></p>
                    <div className="bd">
                      <p className="ti">02 核实</p>
                      <p className="intro">顾问会根据和您的约定，上门核实房源信息，以便于更快找到租客！</p>
                    </div>
                  </dd>
                  <dd className="three clearfix">
                    <p className="pic"></p>
                    <div className="bd">
                      <p className="ti">03 出租</p>
                      <p className="intro">爱租派会在最短的时间内，帮您找到租客，并提供认证服务，让您的房子租的更安全！</p>
                    </div>
                  </dd>
                  <dd className="four clearfix">
                    <p className="pic"></p>
                    <div className="bd">
                      <p className="ti">04 租期服务</p>
                      <p className="intro">房子出租之后出面的问题，不用担心，有爱租派来帮您解决这些烦心事！</p>
                    </div>
                  </dd>
                </dl>
              </div>
            </div>
          </div>
        }

        <div className="indexBottomBanner">
        </div>
        <div className="indexPartnerBg">
          <div className="indexPartner wrap1180">
            <div className="hd">与&nbsp;&nbsp;合作伙伴&nbsp;&nbsp;共同打造更有调调的租房</div>
            <ul className="clearfix">
              {ImgArray}
            </ul>
          </div>
        </div>
        <Footer/>
      </div>
    )
  }
});

export default Index;


